import { Card, Button, Space } from 'antd';
import {
  PlusOutlined,
  DeleteOutlined,
  SearchOutlined,
} from '@ant-design/icons';

import { useState } from 'react';
import request from 'umi-request';

const Index = () => {
  const [loading, setLoading] = useState<boolean>(false);

  const fn = () => {
    setLoading(true);
    request.get('http://www.pudge.wang:3080/api/rated/list').then((res) => {
      console.log(res);
      setLoading(false);
    });
  };

  return (
    <Space direction="vertical" style={{ display: 'flex' }}>
      <Card title="基础按钮">
        <Space>
          <Button type="primary" size="large">
            Primary Button
          </Button>
          <Button>Primary Button</Button>
          <Button type="dashed">Dashed Button</Button>
          <Button type="primary" danger>
            Primary
          </Button>
          <Button type="dashed" danger>
            Primary Button
          </Button>
          <Button type="primary" disabled>
            Primary
          </Button>
        </Space>
      </Card>

      <Card title="图形按钮">
        <Space>
          <Button icon={<PlusOutlined />}>添加</Button>
          <Button type="primary" icon={<DeleteOutlined />}>
            删除
          </Button>
          <Button type="primary" shape="circle" icon={<SearchOutlined />} />
        </Space>
      </Card>

      <Card title="Loading">
        <Space>
          {/* 当loading为true的时候，点击事件是无效的 */}
          {/* 可以用loading的按钮做类似防抖的功能 */}
          <Button type="primary" loading={loading} onClick={fn}>
            Loading
          </Button>
        </Space>
      </Card>
    </Space>
  );
};

export default Index;
